<template>
  <el-container class="contacts-main">
    <el-aside width="250px" class="contacts-aside">
      <ContactsList @busContactsInfo="getContactsInfo" @busQueryUserLoading="changeQueryUserLoading"></ContactsList>
    </el-aside>
    <el-main class="content">
      <div class="contacts-empty" v-if="contactsInfo == null">
        <el-empty description="空空如也"></el-empty>
      </div>
      <ContactsInfo :contactsInfo="contactsInfo" v-else-if="contactsInfo != null" :queryUserLoading="queryUserLoading"
      @changeContactsInfo="getContactsInfo"></ContactsInfo>
    </el-main>
  </el-container>
</template>

<script>
import ContactsInfo from './contacts-info'
import ContactsList from './contacts-list'
export default {
  name: 'contacts',
  components: {
    ContactsInfo,
    ContactsList
  },
  data() {
    return {
      contactsInfo: null,
      queryUserLoading: false,
    }
  },
  methods: {
    getContactsInfo(data) {
      this.contactsInfo = data
    },
    changeQueryUserLoading(data){
      this.queryUserLoading = data
    }
  },
}
</script>

<style scoped>
.contacts-aside {
  height: 100%;
  border-right: 1px solid #f1f2f4;
}

.contacts-main {
  height: 100%;
}

.content {
  background-color: #ffff;
}

.contacts-empty{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>